<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>这是第01个li</li>
        <li>这是第02个li</li>
        <li>这是第02个li</li>
        <li>这是第02个li</li>
        <li>这是第05个li</li>
        <li>这是第06个li</li>
    </ul>

    <script>

        // 1. Set 和 WeakSet 数据
        // size 属性，类似于以前数组的 length
        // 如果是基本数据类型会去重，但是引用数据类型因为地址不同，所以不会去重

        // 1. 构造函数创建
        // 注意：不能放置多个零散的数据，不能放置数字
        // const data = new Set('来尚硅谷学习硅谷的技术');

        // 2. 在创建Set的数据中，会自动去掉重复的项
        const data = new Set(['abc', 'xyz', 102, 'abc', 'aaa', true, 102]);

        console.log(data);
        // console.log(typeof data);
        // console.log(Object.prototype.toString.call(data).slice(8, -1));  // Set

        // 补充，去重的快捷方式
        // console.log(Array.from(data));
        // console.log([...data]);

        // console.log(new Set(document.querySelectorAll('li')));

        var arr = [
            { name: '张三', age: 20 },
            { name: '张三', age: 20 },
            { name: '张三', age: 20 }
        ]
        // console.log(new Set(arr));

        // 3. Set 数据的方法
        data.add('null');
        data.delete(102);
        // console.log(data.has('aaa'));
        // data.clear();

        // console.log(data);

        // 可以进行遍历
        // data.forEach(item => {
        //     console.log(item);
        // })

        // 遍历器，Map数据
        // console.log(data.keys());
        // console.log(data.values());
        // console.log(data.entries()); // 像箭头函数，但不是，本质上是数组的方式（Map）

        // 4. 新的遍历方式
        for (const val of arr) {
            // console.log(val);
        }

        // Set 数据不允许放置对象，写了报错
        // console.log(new Set({ a: 10, b: 20 }));

        // 5. 声明 WeakSet()
        const dataOnly = new WeakSet([['a', 10], ['b', 20]]);
        // dataOnly is not iterable
        // for (const item of dataOnly) {
        //     console.log(item);
        // }
        console.log(dataOnly);
    </script>
</body>

</html>